<script setup>
import Header from './components/Header.vue';
import Content from './components/Content.vue';
import Navigator from './components/Navigator.vue';

import {ref} from "vue"

let username=ref("张飞")

let getHeaderData=(val)=>{
  alert(val);
}


let data = ref('')
let getNavigatorData=(val)=>{
    data.value=val;
}

</script>

<template>
  <div>
     <Header class="header" :message="username" @getFromHeader="getHeaderData"></Header>
     <Navigator class="navigator" @toApp="getNavigatorData"></Navigator>
     <Content class="content" :data="data"></Content>
  </div>
</template>
<style scoped>
    .header{
       height: 80px;
       border: 1px solid red;
    }
    .navigator{
      width: 15%;
      height: 800px;
      display: inline-block;
      border: 1px blue solid;
      float: left;
    }
    .content{
      width: 83%;
      height: 800px;
      display: inline-block;
      border: 1px goldenrod solid;
      float: right;
    }
</style>